<template>
	<view class="member-avatar" v-if="isVisible">
	    <image
			:class="imgStyle"
			:src="imgUrl"
			mode="aspectFill"
			:size="size">
			{{member.avatar?'': member.nickName || member.userName || member.name}}
	    </image>
	    <view v-if="online && member.online" class="online"></view>
	    <slot></slot>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		name: "MemberAvatar",
		model: {
			prop: 'member',
			event: 'change'
		},
		props: {
			member: {
				type: Object,
				default: () => {}
			},
			size: {
				type: String,
				default: 'medium'
			},
			online: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			isVisible: function() {
				return this.member.avatar || this.member.nickName || this.member.userName || this.member.name
			},
			imgUrl: function() {
				if(this.member.avatarUrl) {
					return this.member.avatarUrl;
				}
				return this.member.avatar?config.baseUrl + this.member.avatar:''
			},
			imgStyle: function() {
				let classList = ['avatar'];
				if(this.size) {
					classList.push(`avatar-${this.size}`)
				}
				if(this.member.isStatistics) {
					classList.push('avatar-statistics')
				}
				return classList.join(' ');
			},
		}
	}
</script>

<style lang="scss" scoped>
.avatar {
	height: 62rpx;
	width: 62rpx;
	border-radius: 50%;
	border: #FFF 2px solid;
	flex-shrink: 0;
	+.online {
		position: absolute;
		background-color: #67C23A;
		border-radius: 50%;
	}
}
.avatar-medium {
	height: 62rpx;
	width: 62rpx;
	line-height: 30px;
	+.online {
		bottom: 5px;
		left: 24px;
		line-height: 8px;
		width: 10px;
		height: 10px;
	}
}
.avatar-small {
	height: 58rpx;
	width: 58rpx;
	line-height: 24px;
	font-size: 12px;
	+.online {
		bottom: 5px;
		left: 22px;
		line-height: 6px;
		width: 6px;
		height: 6px;
	}
}
.avatar-statistics {
	background-color: '#E4E7ED';
	color: '#909399';
}
.member-avatar {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
</style>